<template>
  <div id="test1">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line">
        <i class="el-icon-edit-outline"></i>我要报考
        <i class="el-icon-arrow-right"></i>三位一体</el-col>
    </el-row>
    <div class="content">
      <div class="back" v-show="tipshow"></div>
      <div class="tip" v-show="tipshow">
        <el-alert
          :title="tip"
          type="error"
          left
          show-icon>
        </el-alert>
      </div>
      <form class="layui-form formMessage" action="">
        <table class="layui-table">
          <tbody>
            <tr>
              <td class="members" colspan="2">选考科目</td>
              <td colspan="5">
                <el-select v-model="form.subject1" placeholder="请选择" @change="checkSubj">
                  <el-option v-for="item in subject" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                <el-select v-model="form.subject2" placeholder="请选择" @change="checkSubj">
                  <el-option v-for="item in subject" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
                <el-select v-model="form.subject3" placeholder="请选择" @change="checkSubj">
                  <el-option v-for="item in subject" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
                </el-select>
              </td>
              <td colspan="2">测试类别</td>
              <td colspan="3">
                <el-select v-model="form.ctype" placeholder="请选择">
                  <el-option v-for="item in ctype" :label="item" :value="item"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td class="members" colspan="2" rowspan="4">会考成绩</td>
              <td width="50px">语文</td>
              <td>
                <el-select v-model="form.hkinfo.yw" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
              <td colspan="1" width="50px">历史</td>
              <td colspan="2">
                <el-select v-model="form.hkinfo.ls" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
              <td colspan="2" width="40px">化学</td>
              <td colspan="2">
                <el-select v-model="form.hkinfo.hx" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>数学</td>
              <td>
                <el-select v-model="form.hkinfo.sx" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
              <td colspan="1">物理</td>
              <td colspan="2">
                <el-select v-model="form.hkinfo.wl" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
              <td colspan="2">技术</td>
              <td colspan="2">
                <el-select v-model="form.hkinfo.js" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>英语</td>
              <td>
                <el-select v-model="form.hkinfo.yy" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
              <td colspan="1">地理</td>
              <td colspan="2">
                <el-select v-model="form.hkinfo.dl" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
              <td colspan="2">政治</td>
              <td colspan="2">
                <el-select v-model="form.hkinfo.zz" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td>生物</td>
              <td>
                <el-select v-model="form.hkinfo.sw" placeholder="请选择">
                  <el-option label="A" value="A"></el-option>
                  <el-option label="B" value="B"></el-option>
                  <el-option label="C" value="C"></el-option>
                  <el-option label="D" value="D"></el-option>
                </el-select>
              </td>
              <td colspan="7"></td>
            </tr>
            <tr>
              <td class="awards" colspan="2" :rowspan="Srowspan">是否专项生</td>
              <td :colspan="Scolspan" :rowspan="Srowspan">
                <el-checkbox v-model="form.special" @change="changeBox">是</el-checkbox>
              </td>
              <td colspan="5" v-show="specialShow">
                专项名称
              </td>
              <td colspan="4" v-show="specialShow">
                证明
              </td>
            </tr>
            <tr v-show="specialShow">     
              <td colspan="5">
                <el-select v-model="form.special_con.name" placeholder="请选择">
                  <el-option v-for="item in special" :label="item" :value="item"></el-option>
                </el-select>
              </td>
              <td colspan="4">
                  <el-upload
                    class="avatar-uploader"
                    name="file"
                    :action="host+'/3v1t.smserver.cn/index.php/student/Aboutbaseinfos/upload'"
                    :show-file-list="false"
                    :on-change="change2"
                    :on-success='uploadSuccess2'
                    :on-progress='progress'
                    accept="image/*"                  
                    >
                    <img v-if="form.special_con.imageUrl" :src="form.special_con.imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </td>
            </tr>
            <tr>
              <td colspan="2">自述报告</td>
              <td colspan="10">
                <el-upload
                    class="avatar-uploader"
                    name="file"
                    :action="host+'/3v1t.smserver.cn/index.php/student/Aboutbaseinfos/upload'"
                    :show-file-list="false"
                    :on-change="change3"
                    :on-success='uploadSuccess3'
                    :on-progress='progress'
                    accept="image/*"                  
                    >
                    <img v-if="form.report" :src="form.report" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
              </td>
            </tr>
            <tr>
              <td class="study_experience" :rowspan="Erowspan" colspan="2">学习经历</td>
              <td colspan="2">何年何月至何年何月</td>
              <td colspan="2">在何学校或单位</td>
              <td colspan="3">任何职</td>
              <td colspan="3">证明人</td>
            </tr>
            <template v-for="item in form.experience">
              <tr class="experience">
                <td colspan="2">
                  <el-input v-model="item.time"></el-input>
                </td>
                <td colspan="2">
                  <el-input v-model="item.place"></el-input>
                </td>
                <td colspan="3">
                  <el-input v-model="item.work"></el-input>
                </td>
                <td colspan="3">
                  <el-input v-model="item.witness"></el-input>
                </td>
              </tr>
            </template>
            
            <tr>
              <td colspan="11" align="center" @click="addInput">
               <i class="el-icon-plus"></i>添加
              </td>
            </tr>
            <tr>
              <td class="awards" colspan="2" :rowspan="Arowspan">奖惩情况</td>
              <td colspan="3">
                获奖时间
              </td>
              <td colspan="4">
                奖项名称
              </td>
              <td colspan="3">
                证明
              </td>
            </tr>
            <template v-for="(item,index) in form.reward">
              <tr class="award">
                <td colspan="3">
                 <el-input v-model="item.time"></el-input>
                </td>
                <td colspan="4">
                 <el-input v-model="item.name"></el-input>
                </td>
                <td colspan="3">
                  <el-upload
                    class="avatar-uploader"
                    name="file"
                    :action="host+'/3v1t.smserver.cn/index.php/student/Aboutbaseinfos/upload'"
                    :show-file-list="false"
                    :on-change="change"
                    :on-success='uploadSuccess'
                    :on-progress='progress'
                    accept="image/*"                  
                    >
                    <img v-if="item.imageUrl" :src="item.imageUrl" class="avatar" @click="getIndex(index)">
                    <i v-else class="el-icon-plus avatar-uploader-icon" @click="getIndex(index)"></i>
                  </el-upload>
                </td>
              </tr>
            </template>
          
            <tr>
              <td colspan="11" align="center" @click="addInputAward">
                <i class="el-icon-plus"></i>添加
              </td>
            </tr>
            
          </tbody>
        </table>
        <div style="text-align: center;"> 
            <el-button type="primary" @click="add" style="width:100px;" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">保存</el-button> 
            <el-button type="primary" @click="joinTest" style="width:100px;">报名</el-button>                          
        </div>
      </form>
    </div>
  </div>
</template>

<script>
  import VDistpicker from 'v-distpicker'
  import _ from 'lodash';
  export default {

    data() {
      return {
        tipshow:false,
        tip:'无法修改',
        fullscreenLoading:false,
        Erowspan: 6,
        Arowspan:6,
        Scolspan:10,
        Srowspan:1,
        imageUrl: '',
        checked: false,
        specialShow:false,
        ctype:[],
        special:[],
        rewardUrl:[],
        idx:'',
        form: {
          subject1: '',
          subject2: '',
          subject3: '',
          special:false,
          report:'',
          special_con:{
            name:"",
            witness:'',
            imageUrl:''
          },
          ctype:'',
          hkinfo:{},
          experience: [
            {
              time: '',
              place: '',
              witness: '',
              work: ''
            },
            {
              time: '',
              place: '',
              witness: '',
              work: ''
            },
            {
              time: '',
              place: '',
              witness: '',
              work: ''
            },
            {
              time: '',
              place: '',
              witness: '',
              work: ''
            }
          ],
          reward: [
            {
              time: '',
              name: '',
              witness: '',
              imageUrl:'' 
            },
            {
              time: '',
              name: '',
              witness: '' ,
              imageUrl:'' 
            }, 
            {
              time: '',
              name: '',
              witness: '' ,
              imageUrl:'' 
            },
            {
              time: '',
              name: '',
              witness: '' ,
              imageUrl:'' 
            }
          ],
          
        },
        loading:false,
        subject:[
          {
            value: '物理',
            label: '物理'
          },
          {
            value: '化学',
            label: '化学'
          },
          {
            value: '生物',
            label: '生物'
          },
          {
            value: '地理',
            label: '地理'
          },
          {
            value: '历史',
            label: '历史'
          },
          {
            value: '政治',
            label: '政治'
          }
        ]
      }
    },
    components: {
      VDistpicker
    },
    mounted(){
      this.fullscreenLoading=true;
      this.getInfo();
    },
    methods: {
      getIndex(idx){
        //console.log(idx);
        this.idx=idx;
        
      },
      checkSubj(val){
        console.log(val)
        this.subject.forEach((item)=>{
          if(item.value==this.form.subject1){
                  item.disabled=true;
                }else if(item.value==this.form.subject2){
                  item.disabled=true;
                }else if(item.value==this.form.subject3){
                  item.disabled=true;
                }else{
                  item.disabled=false;
                }
        })
      },
      change( file, fileList){
       // console.log(file.raw.type);
        console.log(this.idx)
        const isLt2M = file.raw.size / 1024 / 1024 < 1;
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 1MB!');
            return;
          }
          //this.form.reward[this.idx].imageUrl = URL.createObjectURL(file.raw);
      },
      progress(){
        this.fullscreenLoading=true;
      },
      uploadSuccess(response, file, fileList){
        this.form.reward[this.idx].witness=response.url
        this.form.reward[this.idx].imageUrl=response.url;
        this.fullscreenLoading=false;
      },
      change2( file, fileList){
       // console.log(file.raw.type);
        const isLt2M = file.raw.size / 1024 / 1024 < 1;
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 1MB!');
            return;
          }
          this.form.special_con.imageUrl = URL.createObjectURL(file.raw);
      },
      uploadSuccess2(response, file, fileList){
        this.form.special_con.witness=response.url;
        this.fullscreenLoading=false;
      },
      change3( file, fileList){
       // console.log(file.raw.type);
        const isLt2M = file.raw.size / 1024 / 1024 < 1;
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 1MB!');
            return;
          }
          //this.form.report = URL.createObjectURL(file.raw);
      },
      uploadSuccess3(response, file, fileList){
        this.form.report=response.url;
        this.fullscreenLoading=false;
      },
      getInfo(){
        var that=this;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/get_swyt',
          method:'post',
          headers:{
                "Content-type":"application/json"
          }
        }).then((res)=>{
          console.log(res);
          that.fullscreenLoading=false;
          if(res.data.code==1){
            var data=res.data.data
            that.ctype=data.ctype;
            that.special=data.special;
            if(data.status==2){
              that.tip=res.data.msg;
              that.tipshow=true;
            }
            if(data.udate){
              if(data.udate.special==true){
                that.Scolspan=1;
                that.Srowspan=2;
                that.specialShow=true;
                data.udate.special_con.imageUrl=data.udate.special_con.witness;
              }else if(data.udate.special==false){
                data.udate.special_con={
                  name:"",
                  witness:'',
                  imageUrl:''
                }
              }
              data.udate.reward.forEach((item)=>{
                item.imageUrl=item.witness;
              })
              that.form=data.udate;
              that.subject.forEach((item)=>{
                if(item.value==data.udate.subject1){
                  item.disabled=true;
                }else if(item.value==data.udate.subject2){
                  item.disabled=true;
                }else if(item.value==data.udate.subject3){
                  item.disabled=true;
                }
              })
              //console.log(that.form);
            }
          }else if(res.data.code==2){
            that.$router.push('/userHome/joinTest')
          }
        })
      },
      add(){
        var that=this;
         this.fullscreenLoading=true;
        var message=this.form;
        console.log(message);
        // var tag=true;
        //   _.forEach(message, function(value, key) {  
        //       if(key!="special"&&key!="hkscore"){
        //         if(value==""){
        //           //console.log(key)
        //           tag = false;
        //         }
        //       }
        //   });
        //   console.log(tag)
        // if(!tag){
        //   that.$message({
        //     type:'warning',
        //     message:'表单填写不完整，请检查！'
        //   })   
        // }else{
              this.axios({
                url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/swytpost',
                method:'post',
                data:JSON.stringify(message),
                headers:{
                  "Content-type":"application/json"
                }
              }).then((res)=>{
                 that.fullscreenLoading=false;
                if(res.data.code==1){
                  that.$message({
                    type:'success',
                    message:""+res.data.msg
                  })
                }else if(res.data.code==2){
                  that.$message({
                    type:'warning',
                    message:''+res.data.msg
                  })
                }   
              })
        //}
      },
      joinTest(){
        var that=this;
         this.fullscreenLoading=true;
        var message=this.form;
              this.axios({
                url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/swytpost',
                method:'post',
                data:JSON.stringify(message),
                headers:{
                  "Content-type":"application/json"
                }
              }).then((res)=>{
                if(res.data.code==1){
                  that.axios({
                    url:this.host+'/3v1t.smserver.cn/index.php/student/enroll/signup',
                    method:'post',
                    data:JSON.stringify({type:"01"}),
                    headers:{
                      "Content-type":"application/json"
                    }
                  }).then((res)=>{
                    console.log(res)
                    that.fullscreenLoading=false;
                    if(res.data.code==1){
                      setTimeout(()=>{
                         that.$router.push('/userHome/print1')
                      },3000)
                      that.$message({
                        type:'success',
                        message:''+res.data.msg
                      })
                    }else if(res.data.code==2){
                      that.$message({
                        type:'warning',
                        message:''+res.data.msg
                      })
                    }   
                  })
                }else if(res.data.code==2){
                  that.$message({
                    type:'warning',
                    message:''+res.data.msg
                  })
                }   
              }) 
      },
      addInput() {
        this.form.experience.push({
              time: '',
              place: '',
              witness: '',
              work: ''
            })
        this.Erowspan += 1;
      },
      addInputAward() {
        this.form.reward.push({
              time: '',
              name: '',
              witness: '' 
            })
        this.Arowspan += 1;
      },
      changeBox(value) {
        console.log(value)
        if(value==true){
          this.Scolspan=1;
          this.Srowspan=2;
          this.specialShow=true;
        }else if(value==false){
          this.Scolspan=10;
           this.Srowspan=1;
          this.specialShow=false;
        }
      },
      
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  #test1 {
    //width:100%;
    //line-height:100%;
    padding: 10px;
    .line {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
    .content {
      padding: 20px;
      text-align: center;
      position:relative;
    }

    .el-select{
      width:130px;
    }
    .layui-table img{
      max-height:60px;
    }
    .tip{
      text-align: left;
    }
    .back{
      height:100%;
      width:100%;
      background:transparent;
      position:absolute;
      top:0;
      left:0;
      right:0;
      z-index:99;
    }
  }

</style>
